<template>
	<!-- 置顶页头区域 -->
	<view style="position: relative;">
		<view style="position:absolute;width:100%;top: 0;background-color: white;z-index: -1;">
			<view style="position: relative;width: 100%;background-color: white;" :style="{height:80 + 'px'}">
				<view style="position: absolute;left: 0;top:-60%;;width: 80%;height: 100px;background-image:linear-gradient(45deg, #ffff1d, #ffcb50);border-radius: 100px;filter: blur(50px);opacity: 0.6;"></view>
				<view style="position: absolute;right: -5%;top:-60%;width: 30%;height: 100px;background-image:linear-gradient(45deg, #ff0004, #ff428e);border-radius: 100px;filter: blur(50px);opacity: 0.6;"></view>
				<view style="position: absolute;left: 15px;bottom: 15px;font-size: 17px;"></view>
			</view>
		</view>
		<view style="position: relative;">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"color-header",
		data() {
			return {
				
			};
		},
		computed:{
			placeholdHeight(){
				return this.statusBarHeight + this.navbarHeight
			},
			statusBarHeight(){
				let statusBarHeight = 100
				
				uni.getSystemInfo({
				    success: (e) => {
						statusBarHeight = e.statusBarHeight
					}
				})
				
				return statusBarHeight
			},
			navbarHeight()
			{
				let statusBar = 0  //状态栏高度
				let customBar = 0  // 状态栏高度 + 导航栏高度  
				let navbar = 0 // 自定义标题与胶囊对齐高度
				let navbarHeight = 48
				
				uni.getSystemInfo({
				    success: (e) => {
						// this.compareVersion(e.SDKVersion, '2.5.0')
													
						// #ifdef MP
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						if (e.platform === 'android') {
						  this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						  customBar = e.statusBarHeight + 50
						}
						// #endif
						
						
						// #ifdef MP-WEIXIN
						statusBar = e.statusBarHeight
						const custom = wx.getMenuButtonBoundingClientRect()
						customBar = custom.bottom + custom.top - e.statusBarHeight
										 
						navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
						
						navbarHeight = custom.bottom - custom.top + 10
						// #endif
										 
										 
						// #ifdef MP-ALIPAY
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + e.titleBarHeight
						navbarHeight = e.titleBarHeight
						// #endif
										 
										 
						// #ifdef APP-PLUS
						console.log('app-plus', e)
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						// #endif
										 
										 
						// #ifdef H5
						statusBar = 0
						customBar = e.statusBarHeight + 45
						// #endif
					
				    }
				})
			
				return navbarHeight
			}
		}
	}
</script>

<style>

</style>